<template>
	<view>
		<u-sticky>
			<view class="header">
				<u-search placeholder="请输入商品关键字" v-model="keyword" shape="square" :showAction="false" @search="searchlist"></u-search>
				<view class="button">
					<view class="btn" @click="show = true">{{ categoryName }}</view>
				</view>
			</view>
			<u-picker :show="show" :columns="categoryList" keyName="categoryName" @confirm="confirm" @cancel="show = false"></u-picker>
			<view class="tags"><u-tabs :list="list1" @click="click" width="300rpx"></u-tabs></view>
		</u-sticky>
		<view class="content">
			<view class="list" v-for="item in goodsList">
				<view class="box" >
					<!-- <view class="box-one">
						<u-checkbox-group v-model="checked"><u-checkbox shape="circle" @change="checkboxChange"></u-checkbox></u-checkbox-group>
					</view> -->
					<view class="box-two" @tap="set(1, item)">
						<image style="width: 150rpx;height: 150rpx;border-radius: 15rpx;" :src="item.rotationImgsJson[0]" mode=""></image>
						<view class="tuijian" v-if="item.recommendationStatus==1">推荐</view>
						<view class="xiajia" v-if="item.goodsStatus==1">已下架</view>
						
					</view>

					<view class="box-three" >
						<view class="one"  @tap="set(1, item)">{{ item.goodsName }}</view>
						<view class="two"  @tap="set(1, item)">
							<view class="text">库存：{{ item.stockNum }}</view>
							<view class="text">已售：{{ item.totalSales }}</view>
							<view class="text">浏览：{{ item.goodsViewCount }}</view>
						</view>
						<view class="three">
							<view class="left">￥{{ item.goodsPrice }}</view>
							<view class="con" v-if="item.pperationalState">
								<view class="con-one" style=""></view>
								<view class="con-two" style="">
									<view class="btn" @tap="set(1, item)">
										<view class=""><u-icon name="edit-pen" color="#fff" size="20"></u-icon></view>
										<view class="">编辑</view>
									</view>
									<view class="btn" @tap="set(6, item)" v-if="item.recommendationStatus==0">
										<view class=""><u-icon name="thumb-up" color="#fff" size="20"></u-icon></view>
										<view class="">推荐</view>
									</view>
									<view class="btn" @tap="set(6, item)" v-if="item.recommendationStatus==1">
										<view class=""><u-icon name="thumb-down" color="#fff" size="20"></u-icon></view>
										<view class="">取消</view>
									</view>
									<view class="btn" @tap="set(2, item)" v-if="item.goodsStatus==1">
										<view class=""><u-icon name="arrow-upward" color="#fff" size="20"></u-icon></view>
										<view class="">上架</view>
									</view>
									<view class="btn" @tap="set(3, item)" v-if="item.goodsStatus==0">
										<view class=""><u-icon name="arrow-downward" color="#fff" size="20"></u-icon></view>
										<view class="">下架</view>
									</view>
									<view class="btn" @tap="set(4, item)">
										<view class=""><u-icon name="trash" color="#fff" size="20"></u-icon></view>
										<view class="">删除</view>
									</view>
								</view>
							</view>

							<view class="right" @tap="btnshow(item)"><u-icon name="more-dot-fill" color="#fff" size="20"></u-icon></view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- <view class="footer">
			<view class="left">
				<u-checkbox-group v-model="checked"><u-checkbox shape="circle" @change="checkboxChange" label="选中全部"></u-checkbox></u-checkbox-group>
			</view>
			<view class="right">
				<view class="tet">推荐</view>
				<view class="tet">取推</view>
				<view class="tet">上架</view>
				<view class="tet">下架</view>
			</view>
		</view> -->
	</view>
</template>

<script>
import { searchPlugsGoodsList, searchPlugsGoodCategoryList, delPlugsGoods,updatePlugsGoods,setGoodsRecommend } from '../../../utils/api.js';
export default {
	data() {
		return {
			keyword: '',
			checked: true,
			show: false,
			list1: [
				{
					id:-1,
					name: '全部'
				},
				{
					id:0,
					name: '上架中'
				},
				{
					id:1,
					name: '已下架 '
				}
			],

			goodsList: [],
			categoryList: [[{ categoryName: '更多分类', id: -1 }]],
			search: {
				page: 1,
				size: 10
			},
			categoryName: '更多分类',
			goodsCategoryId: -1,
			goodsStatus:-1,
			total:''
		};
	},
	onShow() {
		this.getCategoryList();
		this.getGoodlist();
	},
	onReachBottom() {
		if(this.goodsList.length<this.total){
			this.search.page++;
			this.getGoodlist();
		}
	},
	
	onPullDownRefresh () {
		this.search.page=1;
		this.getGoodlist();
	},
	methods: {
		click(item) {
			this.goodsStatus=item.id;
			this.goodsList=[]
			this.search.page=1
			this.getGoodlist();
			console.log(this.goodsStatus, item);
		},
		checkboxChange(e) {
			console.log(e);
		},
		searchlist() {
			this.getGoodlist();
			this.keyword = '';
		},
		getGoodlist() {
			let data = {
				page: this.search.page,
				size: this.search.size,
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				keyword: this.keyword,
				id: 141,
				goodsCategoryId: this.goodsCategoryId,
				businessId: -1,
				goodsStatus:this.goodsStatus
			};
			searchPlugsGoodsList(data).then(res => {
				if (res.code == 200) {
					if (this.search.page == 1) {
						this.goodsList = [];
					}
					res.body.list.forEach(item=>{
						if(item.rotationImgsJson){
							item.rotationImgsJson=JSON.parse(item.rotationImgsJson)
						}
					})
					let arr = [];
					arr = this.goodsList.concat(res.body.list);
					this.goodsList = arr;
					this.total=res.body.total
				}
			});
		},
		getCategoryList() {
			this.categoryList = [[{ categoryName: '更多分类', id: -1 }]];
			let data = {
				page: this.search.page,
				size: this.search.size,
				adminId: uni.getStorageSync('userInfo').id,
				userServiceToken: uni.getStorageSync('userInfo').userServiceToken,
				id: 141,

				businessId: -1
			};
			searchPlugsGoodCategoryList(data).then(res => {
				if (res.code == 200) {
					// this.categoryList[0]=res.body.list
					res.body.list.forEach(item => {
						this.categoryList[0].push(item);
					});
					console.log(this.categoryList[0], 456465);
				}
			});
		},
		confirm(e) {
			console.log(e.value[0].id);
			this.goodsCategoryId = e.value[0].id;
			this.categoryName = e.value[0].categoryName;
			this.show = false;
			this.getGoodlist();
		},
		btnshow(item) {
			
			item.pperationalState = !item.pperationalState;

			// console.log(item);
			// console.log(this.goodsList, 3600);
		},
		set(index, item) {
			console.log(item);
			if (index == 1) {
				uni.navigateTo({
					url: '/pages/goods/goodsAdd/goodsAdd?id=' + item.id
				});
			} else if (index == 2) {
				item.goodsStatus=0
				item.rotationImgsJson=JSON.stringify(item.rotationImgsJson)
				updatePlugsGoods(item).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: '上架成功'
						});
						setTimeout(() => {
							this.getGoodlist();
						}, 500);
					}
				})
			} else if (index == 3) {
				item.goodsStatus=1
				item.rotationImgsJson=JSON.stringify(item.rotationImgsJson)
				updatePlugsGoods(item).then(res=>{
					if(res.code==200){
						uni.showToast({
							icon: 'none',
							title: '下架成功'
						});
						setTimeout(() => {
							this.getGoodlist();
						}, 500);
					}
				})
			} else if (index == 4) {
				let data = {
					ids: item.id
				};
				delPlugsGoods(data).then(res => {
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '删除成功'
						});
						setTimeout(() => {
							this.getGoodlist();
						}, 500);
					}
				});
			}else if (index == 5) {
				uni.navigateTo({
					url:'/pages/goods/goodsAdd/sku/sku?id='+item.id
				})
			}else if (index == 6) {
				let data={
					goodsIdList:item.id
				}
				setGoodsRecommend(data).then(res=>{
					if (res.code == 200) {
						uni.showToast({
							icon: 'none',
							title: '推荐成功'
						});
						setTimeout(() => {
							this.getGoodlist();
						}, 500);
					}
				})
			}
			
		}
	}
};
</script>
<style lang="scss">
page {
	background-color: #f5f5f5;
}
</style>
<style lang="scss" scoped>
page {
	background-color: #999;
}
.header {
	display: flex;
	align-items: center;
	padding: 20rpx;
	background-color: #fff;
	.button {
		margin-left: 20rpx;
		width: 180rpx;
		height: 60rpx;
		.btn {
			color: #fff;
			height: 60rpx;
			line-height: 60rpx;
			font-size: 26rpx;
			background-color: #6da7ff;
			text-align: center;
		}
	}
}
.tags {
	background-color: #fff;
	/deep/.u-tabs__wrapper__nav__item {
		padding: 0 80rpx;
	}
}
.content {
	padding: 20rpx;
	.box {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx;
		margin-bottom: 20rpx;
		.box-one {
		}
		.box-two {
			// width: 150rpx;
			// height: 150rpx;
			margin: 0 10rpx;
			position: relative;
			.tuijian {
				color: #fff;
				background-color: #016eff;
				height: 40rpx;
				width: 80rpx;
				font-size: 24rpx;
				text-align: center;
				line-height: 40rpx;
				border-radius: 0 20rpx 20rpx 0;
				position: absolute;

				top: 20rpx;
				left: 0;
			}
			.xiajia{
				width: 150rpx;
				height: 150rpx;
				color: #fff;
				position: absolute;
				left: 0;
				top: 0;
				text-align: center;
				line-height: 150rpx;
				background-color: rgba(0,0,0,0.5);
				border-radius: 15rpx;
			}
		}

		.box-three {
			width: 500rpx;
			position: relative;
			.one {
				font-weight: 700;
			}
			.two {
				margin: 15rpx 0;
				display: flex;
				align-items: center;
				.text {
					font-size: 26rpx;
					width: 150rpx;
				}
			}
			.three {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.left {
					color: red;
					width: 150rpx;
				}
				.con {
					width: 400rpx;
					height: 120rpx;
					background-color: #6da7ff;
					position: absolute;
					right: 65rpx;
					bottom: -10rpx;
					border-radius: 20rpx;
					z-index: 1;
					.con-one {
						width: 30rpx;
						height: 30rpx;
						background-color: #016eff;
						transform: rotate(45deg);
						position: absolute;
						top: 73rpx;
						right: -14rpx;
						bottom: 0rpx;
					}
					.con-two {
						width: 400rpx;
						height: 120rpx;
						background-color: #016eff;
						display: flex;
						align-items: center;
						justify-content: space-around;
						position: absolute;
						right: 0rpx;
						bottom: 0;
						border-radius: 10rpx;
						color: #fff;
						.btn {
							display: flex;
							align-items: center;
							justify-content: center;
							flex-direction: column;
						}
					}
				}
				.right {
					width: 40rpx;
					height: 40rpx;
					background-color: #016eff;
					border-radius: 30rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}
		}
	}
}
.footer {
	display: flex;
	align-items: center;
	padding: 20rpx;
	position: fixed;
	bottom: 0;
	background-color: #fff;
	width: 100%;
	.left {
		margin-right: 50rpx;
	}
	.right {
		background-color: #eff6ff;
		border: 1rpx solid #d1e5ff;
		// padding: 20rpx;
		border-radius: 30rpx;
		color: #016eff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		.tet {
			padding: 15rpx 30rpx;
			border-right: 1rpx solid #d1e5ff;
		}
		.tet:nth-last-child(1) {
			border-right: none;
		}
	}
}
</style>
